<template>
  <div>
    <a-drawer
      :width="500"
      :title="formState.id ? '编辑菜单' : '新增菜单'"
      placement="right"
      :visible="props.visible"
      @close="onClose"
    >
      <a-form
        ref="menuFormRef"
        :model="formState"
        name="basic"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        autocomplete="off"
        @finish="onFinish"
      >
        <a-form-item label="菜单类型" name="rightType">
          <a-radio-group v-model:value="formState.rightType">
            <a-radio-button
              :value="key"
              v-for="key in Object.keys(RIGHTTYPE)"
              >{{ RIGHTTYPE[key].text }}</a-radio-button
            >
          </a-radio-group>
        </a-form-item>
        <a-form-item label="菜单名称" name="title">
          <a-input
            v-model:value="formState.title"
            placeholder="请输入菜单名称"
          />
        </a-form-item>
        <a-form-item label="父级菜单" name="ids">
          <a-cascader
            v-model:value="formState.ids"
            :options="options"
            placeholder="请选择"
            expandTrigger="hover"
            :changeOnSelect="true"
          >
            <template #suffixIcon><smile-outlined /></template>
          </a-cascader>
        </a-form-item>
        <a-form-item label="权限标识" name="logotype">
          <a-input
            v-model:value="formState.logotype"
            placeholder="请输入权限标识"
          />
        </a-form-item>
        <a-form-item label="路由地址" name="route">
          <a-input
            v-model:value="formState.route"
            placeholder="请输入路由地址"
          />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button
          type="reset"
          @click="onReset"
          :style="{
            'margin-right': '16px',
          }"
          >重置</a-button
        >
        <a-button type="primary" @click="onFinish">提交</a-button>
      </template>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ISysMenu } from "@/type/System";
import { ref, watch } from "vue";
import cloneDeep from "lodash/cloneDeep";
import { RIGHTTYPE } from "@/constants/system";
import { CascaderProps, FormInstance, message } from "ant-design-vue";
import { SmileOutlined } from "@ant-design/icons-vue";

let emit = defineEmits(["update:visible"]);
const formState = ref<ISysMenu & { ids: string[] }>({
  id: "",
  title: "",
  rightType: 1,
  route: "",
  logotype: "",
  children: [],
  ids: [],
});
const menuFormRef = ref<FormInstance>();
const props = defineProps<{
  visible: Boolean;
  sysMenu: ISysMenu | null;
  menuList: ISysMenu[];
}>();

const onClose = () => {
  emit("update:visible");
};
const onFinish = () => {
  message.success({
    content: JSON.stringify(formState.value),
    duration: 1,
  });
  emit("update:visible");
};
// 级联选择上级部门
const options = ref<CascaderProps["options"]>([]);

const setOptons = (params: ISysMenu[], myOptions: CascaderProps["options"]) => {
  params.forEach((item) => {
    const childOption = {
      label: item.title,
      value: item.id,
      children: [],
    };
    myOptions!.push(childOption);
    if (item.children) {
      setOptons(item.children, childOption.children);
    }
  });
};
const onReset = () => {
  menuFormRef.value.resetFields();
};
watch(
  () => props.sysMenu,
  (newVal) => {
    if (newVal) {
      formState.value = cloneDeep(newVal);

      let ids: string[] = [];
      let keys = formState.value.id.split(".");
      keys.forEach((_, index) => {
        let temp = keys
          .slice(0, index + 1)
          .toString()
          .replaceAll(",", ".");
        ids.push(temp);
      });

      formState.value.ids = ids;

      return;
    }
    formState.value = {
      id: "",
      title: "",
      rightType: 1,
      route: "",
      logotype: "",
      children: [],
      ids: [],
    };
  }
);
watch(
  () => props.menuList,
  (newVal) => {
    setOptons(newVal, options.value);
  }
);
</script>
<style lang="less" rel="stylesheet/less" scoped></style>
